<template>
  <el-dialog @close="reset" title="新增" :visible.sync="info.isShow">
    <el-form
      ref="bannerForm"
      :rules="rules"
      :model="bannerData"
      label-width="80px"
    >
      <el-form-item label="活动名称" prop="title">
        <el-input
          placeholder="请输入活动名称"
          v-model="bannerData.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动图片" prop="img">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :on-exceed="() => $message.warning('此处只能选择一张图片')"
          :on-change="imgChange"
          ref="upload"
          :file-list="imgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动状态" prop="status">
        <el-radio-group v-model="bannerData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取消</el-button>
      <el-button @click="submit" type="primary">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      // 需要展示的图片列表
      imgList: [],
      // 表单数据
      bannerData: {
        title: "",
        img: null,
        status: "",
      },
      // 表单校验规则
      rules: {
        title: { required: true, message: "请输入活动标题", trigger: "blur" },
        status: { required: true, message: "请选择活动状态", trigger: "blur" },
      },
    };
  },
  methods: {
    imgChange(file) {
      // 手动同步图片数据
      this.bannerData.img = file.raw;
    },
    // 更新表单数据
    setFormData(row) {
      const { id, title, img, status } = row;
      this.bannerData = { id, title, img, status };
      //  手动设置图片上传组件需要展示的图片
      this.imgList = [{ url: this.$baseUrl + row.img }];
    },
    // 重置数据
    reset() {
      // 重置表单
      this.bannerData = {
        id: "",
        title: "",
        img: null,
        status: "",
      };
      this.info.isShow = false;
      // 手动重置图片上传组件
      this.$refs.upload.clearFiles();
    },
    submit() {
      this.$refs.bannerForm.validate((valid) => {
        if (valid) {
          if (!this.bannerData.id) {
            delete this.bannerData.id;
          }
          //   {}=>FormData
          const fd = new FormData();
          for (let key in this.bannerData) {
            fd.append(key, this.bannerData[key]);
          }
          const url = this.bannerData.id > 0 ? "/banneredit" : "/banneradd";
          this.$axios.post(url, fd).then((res) => {
            if (res.code === 200) {
              this.$message({ type: "success", message: res.msg });
              // 数据重置
              this.reset();
              // 更新活动数据
              this.$emit("updateBanner");
            } else {
              this.$message({ type: "error", message: res.msg });
            }
          });
        }
      });
    },
  },
};
</script>

<style>
</style>